<template>
  <div>
    <el-container style="padding: 20px">
      <el-aside :width="aside">
        <el-menu @select="filterMember" default-active="all" :class="fixed ? 'menu' :''">
          <el-menu-item index="all">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuanduixiezuo"></use>
                </svg>
              </span>
              全部成员
            </template>
          </el-menu-item>
          <el-menu-item index="director">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-lingdao"></use>
                </svg>
              </span>
              负责人
            </template>
          </el-menu-item>
          <el-menu-item index="doctor">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-boshi"></use>
                </svg>
              </span>
              博士研究生
            </template>
          </el-menu-item>
          <el-menu-item index="master">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuoshi"></use>
                </svg>
              </span>
              硕士研究生
            </template>
          </el-menu-item>
          <el-menu-item index="graduated">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-biyesheng"></use>
                </svg>
              </span>
              已毕业成员
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main v-loading="loading">
        <div v-if="showDirector">
          <div :class="limited ? 'limited' : ''" style="padding:30px;">
            <el-row>
              <el-col style="text-align:center" :span="8">
                <img style="width: 200px;" src="../assets/img/luo.png"/>
              </el-col>
              <el-col :span="16">
                <span style="font-size: 32px;">个人简介</span>
                <el-divider>
                </el-divider>
                <el-row style="font-size: 20px; margin-bottom:20px"><strong>罗全明，重庆大学教授，博导</strong></el-row>
                <el-row style="font-size: 17px;">主要从事半导体驱动电源及系统、电动汽车与电网互动系统、交直流微网系统、通信电源系统等方面的研究。承担国家自然科学基金面上项目及青年基金项目各1项、输配电装备及系统安全与新技术国家重点实验室自主面上项目2项，作为主研参加国家高技术研究发展计划（863计划）课题2项、国家自然科学基金重点项目1项及面上项目3项。获教育部高等学校自然科学奖一等奖、二等奖各1项。申请国家发明专利10余项，授权6项，在国内外重要学术期刊及国际会议发表论文40余篇，其中SCI、EI检索30余篇。</el-row>
              </el-col>
            </el-row>
          </div>
        </div>
        <div v-if="showDoctors">
          <el-divider content-position="left">
            <span style="font-size: 24px;">博士研究生</span>
          </el-divider>
          <el-row>
            <el-col :span="span" v-for="(member, index) in doctors" :key="index">
              <div style="margin:15px">
                <el-card :body-style="cardStyle">
                  <el-row type="flex">
                    <el-col :span="9">
                      <div class="avatar">
                        <el-avatar shape="circle" :size="145" fit="contain" :src="baseURI + 'upload/'+ member.uploadId">
                          <img src="../assets/img/no_avatar.jpg"/>
                        </el-avatar>
                      </div>
                    </el-col>
                    <el-col :span="15">
                      <h2>{{member.name}}</h2>
                      <p><i class="el-icon-time"></i> {{member.timeline}}</p>
                      <p><i class="el-icon-s-cooperation"></i> 攻读{{member.degree}}学位</p>
                      <p><i class="el-icon-magic-stick"></i> {{member.interests}}</p>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
        <div v-if="showMasters">
          <el-divider content-position="left">
            <span style="font-size: 24px">硕士研究生</span>
          </el-divider>
          <el-row>
            <el-col :span="span" v-for="(member, index) in masters" :key="index">
              <div style="margin:15px">
                <el-card :body-style="cardStyle">
                  <el-row type="flex">
                    <el-col :span="9">
                      <div class="avatar">
                        <el-avatar shape="circle" :size="145" fit="contain" :src="baseURI + 'upload/'+ member.uploadId">
                          <img src="../assets/img/no_avatar.jpg"/>
                        </el-avatar>
                      </div>
                    </el-col>
                    <el-col :span="15">
                      <h2>{{member.name}}</h2>
                      <p><i class="el-icon-time"></i> {{member.timeline}}</p>
                      <p><i class="el-icon-s-cooperation"></i> 攻读{{member.degree}}学位</p>
                      <p><i class="el-icon-magic-stick"></i> {{member.interests}}</p>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
        <div v-if="showGraduates">
          <el-divider content-position="left">
            <span style="font-size: 24px">已毕业成员</span>
          </el-divider>
          <el-row>
            <el-col :span="span" v-for="(member, index) in graduates" :key="index">
              <div style="margin:15px">
                <el-card :body-style="cardStyle">
                  <el-row type="flex">
                    <el-col :span="9">
                      <div class="avatar">
                        <el-avatar shape="circle" :size="145" fit="contain" :src="baseURI + 'upload/'+ member.uploadId">
                          <img src="../assets/img/no_avatar.jpg"/>
                        </el-avatar>
                      </div>
                    </el-col>
                    <el-col :span="15">
                      <h2>{{member.name}}</h2>
                      <p><i class="el-icon-time"></i> {{member.timeline}}</p>
                      <p><i class="el-icon-s-cooperation"></i> 攻读{{member.degree}}学位</p>
                      <p><i class="el-icon-position"></i> {{member.interests}}</p>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  props: {
    fixed: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      aside: '200px',
      limited: true,
      span: 12,
      baseURI: null,
      loading: true,
      showDirector: true,
      showDoctors: true,
      showMasters: true,
      showGraduates: true,
      doctors: [],
      masters: [],
      graduates: [],
      cardStyle: { padding: '20px', height: '200px' }
    }
  },
  mounted () {
    window.addEventListener('resize', this.onResize)
    this.onResize()
  },
  created () {
    this.baseURI = this.$http.defaults.baseURL
    this.$http.get('member/list').then(res => {
      var memberList = res.data
      this.loading = false
      memberList.sort((a, b) => {
        return new Date(a.since).getTime() - new Date(b.since).getTime()
      })
      memberList.forEach(member => {
        if (member.graduated) member.timeline = member.since + '月 至 ' + member.until + '月'
        else member.timeline = member.since + '月至今'
        member.timeline = member.timeline.replace('-', '年')
        member.timeline = member.timeline.replace('年0', '年')
        member.timeline = member.timeline.replace('-', '年')
        member.timeline = member.timeline.replace('年0', '年')
        if (member.graduated) this.graduates.push(member)
        else if (member.degree === '博士') this.doctors.push(member)
        else this.masters.push(member)
      })
    })
  },
  methods: {
    filterMember (index) {
      this.showDirector = false
      this.showDoctors = false
      this.showMasters = false
      this.showGraduates = false
      if (index === 'all') {
        this.showDirector = true
        this.showDoctors = true
        this.showMasters = true
        this.showGraduates = true
      } else if (index === 'director') this.showDirector = true
      else if (index === 'doctor') this.showDoctors = true
      else if (index === 'master') this.showMasters = true
      else if (index === 'graduated') this.showGraduates = true
    },
    onResize () {
      const width = document.body.getBoundingClientRect().width
      this.limited = width > 1500
      if (width > 1750) this.span = 8
      else this.span = 12
      if (width > 1500) this.aside = '200px'
      else this.aside = '160px'
    }
  }
}
</script>

<style scoped>
.ali-icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.25em;
  fill: currentColor;
  overflow: hidden;
}
.avatar{
  margin-top: 20px;
  margin-right: 20px;
  text-align: center;
}
.limited{
  width: 1200px;
}
.menu{
  position: fixed;
  top: 81px;
  width: inherit;
}
</style>
